<template>
  <!-- 车源 - 下拉筛选菜单 -->
  <view class="car-source-filter">
    <view class="down-section" :class="downStatus ? 'down-open':'down-close'">
      <u-dropdown active-color="#FDD421" ref="uDropdown" @open="open" @close="close" :borderBottom="false"
        duration="200">
        <u-dropdown-item title="品牌配置"></u-dropdown-item>
        <u-dropdown-item title="排序">
          <view class="type-box">
            <view class="sort">
              <view v-for="(item, index) in tegong.price" :key="index" @click="priceSort(item.id)" :class="{ active: priceActive === item.id }">{{ item.name }}</view>
            </view>
            <view class="btn">
              <button @click="clear()">清空/默认</button>
              <button @click="closes()">确定</button>
            </view>
          </view>
        </u-dropdown-item>
      </u-dropdown>
    </view>
    
    <!-- 品牌、地区列表 - 弹出部分 -->
    <view class="popup-section" :style="{ 'visibility': listShow ? 'visible' : 'hidden' }">
      <!-- 遮罩 -->
      <view :class="['mask', openIndex !== -1 ? 'mask-show':'']" @click="closePopupSection"></view>
      
      <view class="content" :class="openIndex !== -1 ? 'up-show':'up-hide'">
        <!-- 内容 -->
        <view v-show="openIndex === 0">
          <brand-list @close="closePopupSection" @change="brandListChange"></brand-list>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import brandList from './brand-list.vue' // 品牌列表
  
  export default {
    name: 'carSourceFilter',
    components: {
      brandList,
    },
    data() {
      return {
        openIndex: -1, // 下拉打开的标识，品牌是0，地区是1，筛选是2
        typeActive: 1, // 商家类型active
        priceActive: -1, // 价格active
        downStatus: false, // 下拉筛选打开状态
        //特供车源
        tegong: {
          //特供车源价格排序
          price: [{
              name: '价格升序',
              id: 0
            },
            {
              name: '价格降序',
              id: 1
            }
          ]
        },
      }
    },
    
    computed: {
      listShow() {
        return this.openIndex !== -1
      },      
    },
    
    methods: {
      // 下拉打开
      open(index) {
        if (index === 0) {
          this.openIndex = index
        } else {
          this.downStatus = true // 打开下拉菜单
        }
        this.$emit('open', index)
      },
      
      // 下拉关闭
      close(index) {
        this.$emit('close', index)
        this.downStatus = false // 打开下拉菜单
      },
      // 封装下拉筛选关闭方法
      downClose() {
        this.$refs.uDropdown.close()
        this.downStatus = false // 打开下拉菜单
      },
      
      // 关闭弹出列表的部分
      closePopupSection() {
        this.openIndex = -1
        this.downClose()
      },
      
      // 选择品牌车型款式
      brandListChange(id) {
        this.$emit('change', { type: 0, id })
      },
      
      //价格排序
      priceSort(id) {
        console.log(id)
        this.priceActive = id !== this.priceActive ? id : ''
        this.priceId = this.priceActive
      },
      
      // 筛选类型清空
      clear() {
        this.typeActive = 1
        this.priceActive = -1
      },
      
      // 类型选中
      tgClick(id) {
        this.typeId = id !== this.typeActive ? id : 1
        this.typeActive = this.typeId
      },
      
      // 商家类型确定筛选
      closes() {
        this.$emit('change', {
          type: 1,
          id: this.priceId,
        })
        this.downClose()
      }
    }
  }
</script>

<style lang="scss" scoped>
.car-source-filter {
  position: relative;
  // z-index: 888;
  background-color: #fff;
  
  // 品牌、地区弹出部分
  .popup-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 993;
    overflow: hidden;
    width: 100%;
    height: 100%;
    
    .content {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      transform: translateY(100%);
      transition: all .3s;
      
      &.up-show {
        transform: translateY(6%) !important;
      }
      &.up-hide {
        transform: translateY(100%) !important;
      }
    }
    
    // 遮罩层
    .mask {
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0;
      visibility: hidden;
      transition: all .3s;
      
      &.mask-show {
        visibility: visible;
        opacity: 0.5;
      }
    }
  }
  
  
  .down-sticky {
    .down-rela {
      position: relative;
    }
  }
  
  // 下拉菜单打开时，给下拉菜单设置高度
  .down-open {
    & /deep/ .u-dropdown__content {
      height: 100vh !important;
    }
  }
  .down-close {
    & /deep/ .u-dropdown__content {
      height: 0 !important;
    }
  }
  
  .btn {
    width: 100%;
    background-color: #fff;
    display: flex;
    margin-top: 20rpx;
  }
  
  button:first-child {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffe23e;
    line-height: 88rpx;
    width: 331rpx;
    height: 88rpx;
    background: #333333;
    margin: 20rpx 0 20rpx 20rpx;
    border-radius: 44rpx 0rpx 0rpx 44rpx;
  }
  
  button:last-child {
    margin: 20rpx 20rpx 20rpx 0;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 88rpx;
    width: 331rpx;
    height: 88rpx;
    background: linear-gradient(-90deg, #fdd421, #ffe23e);
    border-radius: 0rpx 44rpx 44rpx 0rpx;
  }
  
  .sj {
    background-color: #fff;
  
    text {
      margin-left: 50rpx;
      line-height: 50rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
  }
}
// 筛选 商家类型
.type-box {
  background-color: #fff;

  .pinp {
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    view {
      margin: 20rpx 0 0 42rpx;
      width: 170rpx;
      height: 70rpx;
      background: #f4f4f4;
      border-radius: 35rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 70rpx;
      text-align: center;

      &.active {
        background: linear-gradient(-90deg, #fdd422, #ffe23e) !important;
        border-radius: 35px;
      }
    }
  }

  .line {
    width: calc(100% - 84rpx);
    margin: 40rpx auto 20rpx;
    border-top: 2rpx solid #eee;
  }

  .sort {
    display: flex;

    view {
      width: 170rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      background: #f4f4f4;
      border-radius: 35rpx;
      margin: 20rpx 0 0 42rpx;

      &.active {
        background: linear-gradient(-90deg, #fdd422, #ffe23e) !important;
        border-radius: 35px;
      }
    }


  }
}
</style>
